<template>
  <view class="approveItem">
    <view :style="[lineStyle]" class="lineBox">
      <view v-if="index < list.length - 1" class="line"></view>
      <view class="cirel"></view>
    </view>

    <view class="statusName">
      <text v-if="item.status === '1'" class="dai">待审批</text>
      <text v-if="item.status === '2'" class="tong">通过</text>
      <text v-if="item.status === '3'" class="bo">驳回</text>
    </view>
    <view class="nameandtime">
      <text style="margin-right: 22rpx"> {{ item.name }}</text>
      <text>{{ item.ceratTime }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: ["item", "index", "list"],
  data() {
    return {
      size: {},
    };
  },
  methods: {
    // 获取组件的尺寸，用于设置横线的位置
    getStepsItemRect() {
      // #ifndef APP-NVUE
      this.$uGetRect(".approveItem").then((size) => {
        console.log(size);
        this.size = size;
      });
    },
  },
  mounted() {
    this.getStepsItemRect();
  },
  created() {},
  computed: {
    lineStyle() {
      const style = {};

      style.height = this.size.height + "px";

      //   style.top = this.size.height / 2 + 'px'

      return style;
    },
  },
};
</script>

<style lang="scss" scoped>
.line {
  position: absolute;
  width: 4rpx;
  height: 100%;
  background: #efefef;
  left: 0rpx;
  margin-top: 26rpx;
  left: 50%;
  transform: translateX(-50%);
}
.lineBox {
  display: flex;
  position: absolute;
  left: 0rpx;
  top: 30rpx;
}
.cirel {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  opacity: 1;
  border: 4rpx solid #c4c4c4;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nameandtime {
  font-size: 28rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #9e9e9e;
  margin-top: 6rpx;
}
.statusName {
  font-size: 28rpx;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #1d2129;
}
</style>
